<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cinux - 仓库列表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        }
        
        body {
            background-color: #f6f8fa;
            color: #24292e;
            line-height: 1.5;
            padding: 20px;
            max-width: 1000px;
            margin: 0 auto;
        }
        
        header {
            margin: 20px 0;
            padding-bottom: 15px;
            border-bottom: 1px solid #e1e4e8;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        h1 {
            font-size: 20px;
            font-weight: 400;
        }
        
        .user-info {
            font-size: 14px;
            color: #6a737d;
        }
        
        .logout-btn {
            color: #0366d6;
            text-decoration: none;
            font-size: 14px;
            cursor: pointer;
        }
        
        .logout-btn:hover {
            text-decoration: underline;
        }
        
        .repo-list {
            background: #fff;
            border: 1px solid #e1e4e8;
            border-radius: 6px;
            margin-top: 20px;
        }
        
        .repo-header {
            padding: 16px;
            background-color: #f6f8fa;
            border-bottom: 1px solid #e1e4e8;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .repo-count {
            font-size: 14px;
            color: #6a737d;
            font-weight: normal;
        }
        
        .repo-item {
            padding: 16px;
            border-bottom: 1px solid #eaecef;
        }
        
        .repo-item:last-child {
            border-bottom: none;
        }
        
        .repo-name {
            font-size: 16px;
            margin-bottom: 4px;
        }
        
        .repo-name a {
            color: #0366d6;
            text-decoration: none;
        }
        
        .repo-name a:hover {
            text-decoration: underline;
        }
        
        .repo-desc {
            font-size: 14px;
            color: #6a737d;
            margin-bottom: 8px;
        }
        
        .repo-url {
            font-size: 12px;
            color: #6a737d;
            font-family: monospace;
        }
        
        .repo-owner {
            font-size: 12px;
            color: #6a737d;
            margin-top: 5px;
        }
        
        .empty-state {
            padding: 40px 20px;
            text-align: center;
            color: #6a737d;
        }
        
        footer {
            text-align: center;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #e1e4e8;
            color: #6a737d;
            font-size: 12px;
        }
        
        .alert {
            padding: 10px;
            border: 1px solid;
            border-radius: 3px;
            margin-bottom: 15px;
            display: none;
            font-size: 14px;
        }
        
        .alert-error {
            color: #86181d;
            background-color: #ffdce0;
            border-color: #cea0a5;
        }
        
        .search-box {
            margin: 20px 0;
            display: flex;
        }
        
        .search-input {
            flex: 1;
            padding: 8px 10px;
            border: 1px solid #e1e4e8;
            border-radius: 3px 0 0 3px;
            font-family: monospace;
        }
        
        .search-btn {
            background-color: #fafbfc;
            border: 1px solid #e1e4e8;
            border-left: none;
            padding: 0 12px;
            cursor: pointer;
            border-radius: 0 3px 3px 0;
        }
    </style>
</head>
<body>
    <header>
        <h1>仓库列表</h1>
        <div class="user-info">
            用户: <span id="userDisplayName"></span> | 
            <span class="logout-btn" onclick="logout()">退出</span>
        </div>
    </header>
    
    <div id="repoAlert" class="alert"></div>
    
    <div class="search-box">
        <input type="text" id="searchInput" class="search-input" placeholder="搜索仓库..." onkeyup="filterRepositories()">
        <button class="search-btn" onclick="filterRepositories()">🔍</button>
    </div>
    
    <div class="repo-list">
        <div class="repo-header">
            <span>所有仓库</span>
            <span class="repo-count" id="repoCount">0 个仓库</span>
        </div>
        
        <div id="repoContainer">
            <!-- 仓库列表将通过JavaScript动态生成 -->
            <div class="empty-state">
                <p>暂无仓库数据</p>
            </div>
        </div>
    </div>
    
    <footer>
        <p>Powered by JSON 数据存储 | 遵守中国法律，合理使用资源</p>
    </footer>

    <script>
        // 仓库数据文件路径
        const REPO_DATA_FILE = 'repositories.json';
        const USER_DATA_FILE = 'users.json';
        
        // 当前登录用户和所有仓库数据
        let currentUser = null;
        let allRepositories = [];
        let allUsers = [];
        
        // 显示消息
        function showAlert(message, type) {
            const alertBox = document.getElementById('repoAlert');
            alertBox.textContent = message;
            alertBox.className = `alert alert-${type}`;
            alertBox.style.display = 'block';
            
            // 5秒后隐藏警告
            setTimeout(() => {
                alertBox.style.display = 'none';
            }, 5000);
        }
        
        // 加载JSON文件
        async function loadJsonFile(filename) {
            try {
                const response = await fetch(filename);
                if (!response.ok) {
                    // 如果文件不存在，返回空数据
                    if (response.status === 404) {
                        return [];
                    }
                    throw new Error(`无法加载文件: ${response.status}`);
                }
                return await response.json();
            } catch (error) {
                console.error('加载JSON文件出错:', error);
                return [];
            }
        }
        
        // 退出登录
        function logout() {
            sessionStorage.removeItem('currentUser');
            window.location.href = 'index.html';
        }
        
        // 过滤仓库
        function filterRepositories() {
            const searchText = document.getElementById('searchInput').value.toLowerCase();
            const filteredRepos = allRepositories.filter(repo => 
                repo.name.toLowerCase().includes(searchText) || 
                (repo.description && repo.description.toLowerCase().includes(searchText)) ||
                repo.url.toLowerCase().includes(searchText)
            );
            
            displayRepositories(filteredRepos);
        }
        
        // 显示仓库列表
        function displayRepositories(repos) {
            const repoContainer = document.getElementById('repoContainer');
            
            // 清空现有列表
            repoContainer.innerHTML = '';
            
            // 更新仓库计数
            document.getElementById('repoCount').textContent = `${repos.length} 个仓库`;
            
            if (repos.length === 0) {
                repoContainer.innerHTML = `
                    <div class="empty-state">
                        <p>没有找到匹配的仓库</p>
                    </div>
                `;
                return;
            }
            
            // 添加仓库项目
            repos.forEach(repo => {
                const owner = allUsers.find(user => user.userId === repo.userId);
                const ownerName = owner ? owner.username : '未知用户';
                
                const repoItem = document.createElement('div');
                repoItem.className = 'repo-item';
                
                repoItem.innerHTML = `
                    <div class="repo-name">
                        <a href="${repo.url}" target="_blank">${repo.name}</a>
                    </div>
                    <div class="repo-desc">${repo.description || '无描述'}</div>
                    <div class="repo-url">${repo.url}</div>
                    <div class="repo-owner">所有者: ${ownerName}</div>
                `;
                
                repoContainer.appendChild(repoItem);
            });
        }
        
        // 初始化页面
        window.onload = async function() {
            // 检查用户是否已登录
            const userData = sessionStorage.getItem('currentUser');
            
            if (!userData) {
                // 未登录，跳转到登录页面
                window.location.href = 'index.html';
                return;
            }
            
            // 检查是否已同意条款
            if (localStorage.getItem('agreedToTerms') !== 'true') {
                window.location.href = 'account.html';
                return;
            }
            
            // 解析用户数据
            currentUser = JSON.parse(userData);
            
            // 显示用户信息
            document.getElementById('userDisplayName').textContent = currentUser.username;
            
            // 加载所有用户数据
            allUsers = await loadJsonFile(USER_DATA_FILE);
            
            // 加载所有仓库数据
            allRepositories = await loadJsonFile(REPO_DATA_FILE);
            
            // 显示所有仓库
            displayRepositories(allRepositories);
        };
    </script>
</body>
</html>
